<template>
  <div
    id="order-distribute-chart"
    style="height:475px;width:587p;"
  />
</template>

<script>
import * as echarts from 'echarts'
export default {
  name: 'OrderAccountChart',
  data() {
    return {

    }
  },
  methods: {
    // 初始化列表
    initial() {
      const myChart = echarts.init(
        document.getElementById('order-distribute-chart')
      )
      const data = [
        { name: '广东', value: 2500 },
        { name: '山东', value: 2400 },
        { name: '江苏', value: 2200 },
        { name: '浙江', value: 2100 },
        { name: '河南', value: 1900 },
        { name: '四川', value: 1700 },
        { name: '湖北', value: 1600 },
        { name: '台湾', value: 1400 },
        { name: '福建', value: 1300 },
        { name: '湖南', value: 1200 },
        { name: '上海', value: 1050 },
        { name: '安徽', value: 950 },
        { name: '河北', value: 800 },
        { name: '北京', value: 700 },
        { name: '陕西', value: 600 },
        { name: '江西', value: 550 },
        { name: '重庆', value: 450 },
        { name: '辽宁', value: 400 },
        { name: '云南', value: 390 },
        { name: '广西', value: 380 },
        { name: '香港', value: 370 },
        { name: '山西', value: 350 },
        { name: '内蒙古', value: 320 },
        { name: '贵州', value: 300 },
        { name: '新疆', value: 280 },
        { name: '天津', value: 260 },
        { name: '黑龙江', value: 240 },
        { name: '吉林', value: 220 },
        { name: '甘肃', value: 200 },
        { name: '海南', value: 180 },
        { name: '宁夏', value: 160 },
        { name: '青海', value: 140 },
        { name: '西藏', value: 120 },
        { name: '澳门', value: 100 }
      ]

      data.sort(function(a, b) {
        return a.value - b.value
      })
      // 订单分布echarts图表数据
      const barOption = {
        tooltip: {
          borderColor: '#EBEEF5',
          borderWidth: 1,
          padding: [5, 16, 5, 14],
          trigger: 'axis',
          backgroundColor: 'rgba(255,255,255,0.96)',
          formatter: (params) => {
            return (
              '<span style="color:#818693;font-size:12px;margin-right:25px;margin-bottom:4px;display:inline-block">省份：</span>' +
              '<span style="color:#20232A;font-size:12px;display:inline-block">' +
              params[0].name +
              '</span>' +
              '<br />' +
              ('<span style="color:#818693;font-size:12px;margin-bottom:4px;display:inline-block">订单总量：</span>' +
                '<span style="color:#20232A;font-size:12px;display:inline-block;float:right">' +
                params[0].data +
                '笔' +
                '</span>')
            )
          }
        },
        xAxis: {
          type: 'value',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 17
          },
          splitLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '0%',
          height: '100%',
          containLabel: true
        },
        yAxis: {
          type: 'category',
          axisLabel: {
            // rotate: 30,
            interval: 0,
            fontSize: 11,
            color: '#20232A'
          },
          axisLine: {
            lineStyle: {
              color: '#EBEEF5'
            }
          },
          axisTick: {
            show: false
          },
          data: data.map(function(item) {
            return item.name
          })
        },
        animationDurationUpdate: 1000,
        series: {
          type: 'bar',
          id: 'population',
          data: data.map(function(item) {
            return item.value
          }),
          universalTransition: true,
          barWidth: 5,
          itemStyle: {
            color: '#E15536'
          }
        }
      }
      myChart.setOption(barOption)
      // 当窗口或者大小发生改变时执行resize，重新绘制图表
      window.addEventListener('resize', function() {
        myChart.resize()
      })
    }
  }
}
</script>
<style scoped>
  #line-manage-chart {
    height: 400px;
  }
</style>
